<template>
    <view class="container">
        <!-- 用户信息头部 -->
        <view class="user-header" @click="navigateToShopInfo">
            <view class="avatar-section">
                <image :src="shopInfo.logo" class="shop-avatar" mode="aspectFill" />
                <uni-badge text="认证" type="success" absolute="rightTop" />
            </view>
            <view class="shop-info">
                <view class="title-section">
                    <text class="shop-name">{{ shopInfo.name }}</text>
                    <uni-tag :text="shopInfo.status ? '营业中' : '已打烊'" :type="shopInfo.status ? 'success' : 'default'"
                        size="small" @click="toggleShopStatus" />
                </view>
                <text class="shop-id">ID: {{ shopInfo.id }}</text>
                <text class="shop-address">{{ shopInfo.address }}</text>
            </view>
            <uni-icons type="forward" size="20" color="#666" />
        </view>

        <!-- 数据卡片 -->
        <view class="data-cards">
            <uni-grid :column="3" :show-border="false">
                <uni-grid-item>
                    <view class="data-item" @click="navigateToFinance">
                        <text class="data-value">¥{{ account.balance }}</text>
                        <text class="data-label">账户余额</text>
                    </view>
                </uni-grid-item>
                <uni-grid-item>
                    <view class="data-item" @click="navigateToOrders">
                        <text class="data-value">{{ todayData.orders }}</text>
                        <text class="data-label">今日订单</text>
                    </view>
                </uni-grid-item>
                <uni-grid-item>
                    <view class="data-item" @click="navigateToRating">
                        <uni-rate :value="shopInfo.rating" :size="14" :readonly="true" active-color="#ffd21e" />
                        <text class="data-label">{{ shopInfo.rating.toFixed(1) }}分</text>
                    </view>
                </uni-grid-item>
            </uni-grid>
        </view>

        <!-- 功能菜单 -->
        <uni-list class="menu-list">
            <uni-section title="店铺管理" type="line" />
            <uni-list-item title="商品管理" show-extra-icon :extraIcon="{type: 'shop', color: '#4cd964'}" clickable
                @click="navigateToProductManage" />
            <uni-list-item title="订单管理" show-extra-icon :extraIcon="{type: 'list', color: '#007aff'}" clickable
                @click="navigateToOrderManage" />
            <uni-list-item title="员工管理" show-extra-icon :extraIcon="{type: 'person', color: '#ff9500'}" clickable
                @click="navigateToStaffManage" />

            <uni-section title="营销工具" type="line" />
            <uni-list-item title="会员管理" show-extra-icon :extraIcon="{type: 'gift', color: '#e64340'}" clickable
                @click="navigateToCouponManage" />
            <uni-list-item title="促销活动" show-extra-icon :extraIcon="{type: 'flag', color: '#f0ad4e'}" clickable
                @click="navigateToPromotion" />

            <uni-section title="系统设置" type="line" />
            <uni-list-item title="通知设置" show-extra-icon :extraIcon="{type: 'sound', color: '#6739b6'}" clickable
                @click="navigateToNotificationSettings" />
            <uni-list-item title="帮助中心" show-extra-icon :extraIcon="{type: 'help', color: '#666'}" clickable
                @click="openHelpCenter" />
            <uni-list-item title="关于我们" show-extra-icon :extraIcon="{type: 'info', color: '#888'}" clickable
                @click="navigateToAbout" />
        </uni-list>

        <!-- 退出登录 -->
        <view class="logout-btn" @click="handleLogout">
            <text>退出登录</text>
        </view>

        <!-- 版本信息 -->
        <view class="version-info">
            Version {{ version }} • ©2023 商家平台
        </view>
        <tab-bar :current-index="2" />
    </view>
</template>

<script>
	import tabBar from '@/pages/components/tabBar.vue';
	import {
		Get_carshop
	} from "@/pages/apis/login.js"
import { removeToken } from '../tools/cookieMgr';
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				shopInfo: {
					id: '',
					name: '',
					logo: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1953234602,1320584817&fm=253&gp=0.jpg',
					status: true,
					rating: 4.5,
					address: ''
				},
				account: {
					balance: 15860.50,
					frozen: 1200.00
				},
				todayData: {
					orders: 56,
					sales: 28430.00
				},
				version: '2.3.1',
				
			}
		},
		methods: {
			async binb(){
				const res = await Get_carshop();
				if(res.code===0){
					this.shopInfo.name=res.data.data.name;
					this.shopInfo.id=res.data.data.id;
					this.shopInfo.status=res.data.data.open;
					this.shopInfo.address=res.data.data.county;
				}
			},
			toggleShopStatus() {
				uni.showModal({
					title: '修改营业状态',
					content: `确定要切换为${this.shopInfo.status ? '打烊' : '营业'}吗？`,
					success: res => {
						if (res.confirm) {
							this.shopInfo.status = !this.shopInfo.status
							this.updateShopStatus()
						}
					}
				})
			},
			async updateShopStatus() {
				try {
					await this.$api.updateShopStatus({
						status: this.shopInfo.status
					})
					uni.showToast({
						title: '状态更新成功'
					})
				} catch (error) {
					this.shopInfo.status = !this.shopInfo.status
				}
			},
			navigateToShopInfo() {
				uni.navigateTo({
					url: '/pages/shop/info'
				})
			},
			navigateToFinance() {
				uni.navigateTo({
					url: '/pages/finance/index'
				})
			},
			navigateToOrders() {
				uni.navigateTo({
					url: '/pages/todayOrder/todayOrder'
				})
			},
			navigateToRating() {
				uni.navigateTo({
					url: "/pages/rating/rating"
				})
			},
			navigateToProductManage() {
				uni.navigateTo({
					url: "/pages/product/product"
				})
			},
			navigateToOrderManage() {
				uni.navigateTo({
					url: "/pages/order/order"
				})
			},
			navigateToStaffManage() {
				uni.navigateTo({
					url: '/pages/employee/employee'
				})
			},
			navigateToCouponManage() {
				uni.navigateTo({
					url: "/pages/vip/vip"
				})
			},
			navigateToPromotion() {
				uni.navigateTo({
					url: "/pages/promotion/promotion"
				})
			},
			navigateToNotificationSettings() {
				uni.navigateTo({
					url: "/pages/notificationSetting/notificationSetting"
				})
			},
			openHelpCenter() {
				uni.navigateTo({
					url: "/pages/helpCenter/helpCenter"
				})
			},
			navigateToAbout() {
				uni.navigateTo({
					url: "/pages/about/about"
				})
			},
			handleLogout() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出当前账号吗？',
					success: res => {
						if (res.confirm) {
							removeToken()
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					}
				})
			},
			// 其他导航方法...
		},
		onLoad(){
			this.binb();
		}
	}
    
</script>

<style scoped>
    .container {
        background-color: #f5f5f5;
        padding: 20rpx 20rpx 100rpx 20rpx;
    }

    .user-header {
        display: flex;
        align-items: center;
        padding: 30rpx;
        background: #fff;
        margin-bottom: 20rpx;
    }

    .avatar-section {
        position: relative;
        margin-right: 30rpx;
    }

    .shop-avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
    }

    .shop-info {
        flex: 1;
    }

    .title-section {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
    }

    .shop-name {
        font-size: 36rpx;
        font-weight: bold;
        margin-right: 20rpx;
    }

    .shop-id {
        display: block;
        font-size: 24rpx;
        color: #999;
        margin-bottom: 8rpx;
    }

    .shop-address {
        font-size: 26rpx;
        color: #666;
    }

    .data-cards {
        background: #fff;
        margin: 20rpx;
        border-radius: 12rpx;
        padding: 20rpx 0;
    }

    .data-item {
        padding: 30rpx 0;
        text-align: center;
    }

    .data-value {
        font-size: 36rpx;
        color: #333;
        font-weight: bold;
        display: block;
    }

    .data-label {
        font-size: 24rpx;
        color: #999;
        display: block;
        margin-top: 10rpx;
    }

    .menu-list {
        margin: 20rpx;
        border-radius: 12rpx;
        overflow: hidden;
    }

    .logout-btn {
        margin: 40rpx 20rpx;
        padding: 25rpx;
        background: #fff;
        border-radius: 12rpx;
        text-align: center;
        color: #e64340;
        font-weight: 500;
    }

    .version-info {
        text-align: center;
        font-size: 24rpx;
        color: #999;
        margin-top: 30rpx;
    }
</style>